<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>${couple.lover1Name} & ${couple.lover2Name} - HiLover</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <jsp:include page="../common/header.jsp"/>
    
    <main class="main">
        <div class="couple-detail">
            <div class="couple-header">
                <div class="couple-avatars">
                    <img src="${couple.lover1Avatar}" alt="${couple.lover1Name}">
                    <img src="${couple.lover2Avatar}" alt="${couple.lover2Name}">
                </div>
                <div class="couple-info">
                    <span class="lovername">${couple.lover1Name} & ${couple.lover2Name}</span>
                    <span class="start-time">自 <fmt:formatDate value="${couple.startDate}" pattern="yyyy-MM-dd"/> 开始 在一起 ${couple.daysTogether} 天</span>
                </div>
            </div>
            
            <div class="timeline-section">
                <h2>时间轴</h2>
                <div class="timeline">
                    <c:forEach items="${timelines}" var="timeline">
                        <div class="timeline-item">
                            <div class="timeline-date">
                                ${timeline.eventDate}
                            </div>
                            <div class="timeline-content">
                                <p class="timeline-bg">${timeline.content}</p>
                                <c:if test="${not empty timeline.images}">
                                    <div class="timeline-images">
                                        <c:forEach items="${timeline.images.split(',')}" var="image">
                                            <img onclick="window.location.href='${image}'" src="${image}" alt="记录图片">
                                        </c:forEach>
                                    </div>
                                </c:if>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>

            <div class="like-section">
                <button class="like-btn" data-id="${couple.id}">
                    ❤️ ${couple.likes}
                </button>
            </div>
            
            <div class="comment-section">
                <h2>评论</h2>
                <div class="comment-form">
                    <textarea id="commentContent" placeholder="写下你的祝福..."></textarea>
                    <button onclick="addComment()">发表评论</button>
                </div>
                <div class="comment-list">
                    <c:forEach items="${comments}" var="comment">
                        <div class="comment-item">
                            <div class="comment-user">
                                <span class="username">${empty comment.username ? '已注销用户' : comment.username}</span>
                                <span class="time">${comment.formatted_create_time}</span>
                            </div>
                            <div class="comment-content">
                                ${comment.content}
                            </div>
                            <div class="comment-actions">
                                <button onclick="likeComment(${comment.id})" class="like-btn">
                                    👍 ${comment.likes}
                                </button>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </main>
    
    <jsp:include page="../common/footer.jsp"/>
    <script src="/static/js/couple-detail.js"></script>
</body>
</html> 